<template>
  <div class="setgray rounded">
    <div
      class="img-box position-relative"
      lazy
      style="
        background-image: url(https://photo7n.gracg.com/596565_1b73b7814c3b9658a8bc36f37d2c51497_crop.png!400x300);
      "
      @mouseenter="show = true"
      @mouseleave="show = false"
      @click="showDail(1111)"
    >
      <a class="img-box-search-inp" v-show="show"></a>
      <div
        class="position-absolute d-flex"
        style="top: 5px; left: 5px; z-index: 100"
      >
        <div class="icon-work-hot"></div>
        <div class="icon-work-tuijian"></div>
      </div>
      <a href="#"></a>
    </div>
    <div class="great">
      <span class="icon1"></span>4488 <span class="icon2"></span>81
    </div>
    <div class="title text-dark">小魔女的万圣节</div>
    <div class="author">
      <div>
        <a href="#"
          ><img
            src="https://photo7n.gracg.com/596565_3_ee61f379c385d07d90c1fdeb5614f450.jpeg!50x50"
            alt=""
        /></a>
        <router-link to="/">
          <span>元酱啊</span>
          <span class="icon3"></span>
        </router-link>
      </div>
      <span>7天前</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    showDail(v1) {
      this.$router.push({ path: "/work/view" });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../assets/reset";
[class^="icon"] {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 3px;
  margin-right: 4px;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  vertical-align: -2px;
}
@bgc: #f8f9fa;
.img-box {
  // width: 240px;
  height: 200px;
  background-size: cover;
  border-radius: 8px;
  .img-box-search-inp {
    top: 5px;
    right: 5px;
    position: absolute;
    width: 32px;
    height: 32px;
    background-color: #fff;
    background-image: url(http://www.gracg.com/_templates/css/search.png);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 5px;
  }
  .icon-work-hot {
    width: 22px;
    height: 22px;
    background-image: url(https://qiniucssjs.gracg.com/work_hot.png);
    background-size: 22px;
    background-repeat: no-repeat;
    border-radius: 100%;
  }
  .icon-work-tuijian {
    width: 22px;
    height: 22px;
    background-image: url(https://qiniucssjs.gracg.com/work_tuijian.png);
    background-size: 22px;
    background-repeat: no-repeat;
    border-radius: 100%;
  }
}

.great {
  font-size: 14px;
  color: #666;
  padding: 6px 5px;
  background-color: @bgc;
  .icon1 {
    background-image: url(https://qiniucssjs.gracg.com/see.png);
  }
  .icon2 {
    background-image: url(https://qiniucssjs.gracg.com/like.png);
  }
}
.title {
  font-size: 14px;
  font-weight: bolder;
  background-color: @bgc;
  padding: 0px 6px 6px 6px;
}
.author {
  height: 30px;
  line-height: 20px;
  padding: 0 5px 5px;
  display: flex;
  justify-content: space-between;
  background-color: @bgc;
  padding: 0px 6px 6px 6px;
  a {
    text-decoration: none;
    color: #000;
    font-size: 14px;
    margin-right: 10px;
    padding-bottom: 10px;
    color: #666;
    &:first-child {
      img {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
    .icon3 {
      background-image: url(http://www.gracg.com/_templates/css/icon_rz/star.png?);
    }
  }

  span {
    font-size: 14px;
    line-height: 30px;
    color: #666;
  }
}
</style>